jQuery Accessible Carrousel System, using ARIA

The jQuery plugin will transform a simple list of div’s and hx into a fantastic-shiny carrousel system, using ARIA.

Here are how-to-use and some examples of this plugin.

Last updates

15th of September 2017:

Show controls only when there are more than one .carrousel_content, thanks to @harrinsonmb.

14th of April 2017:

Added attribute data-carrousel-active-slide, to display by default an other slide (not the first one) for your carrousel.

A first and “standard” example

A robust base

This carrousel is based on simple div’s, so your page will be working even without JavaScript!
The code that it produces is valid and semantic.
It is entirely modular, quite easy to use and customise.

An accessible carrousel

The order of navigation is simple and logical.
You can easily navigate with the keyboard through it.
It is based on ARIA Design Pattern for tabpanels.

Lightweight

25kb (development, readable by humans);
8kb (minified, readable by machines);
2kb minified and gzipped (readable by… mutants‽‽).

Free and no license problem

No license problem: it uses MIT license, so it’s free, open-source and you can do whatever you want with it, including commercial use. This permission notice shall be included in all copies or substantial portions of it.
However, it is not prohibited to send me a little “thanks”. ;)

It’s (highly) customisable

You can style it as you want;
You can set up transitions… as you want;
A lot of classes are proposed to customize it easily;
There is no CSS code injected into HTML, so your DOM is clean, especially for responsive.

How it is working

A first control

An ordered list ol class="js-carrousel__control__list" is inserted before all elements, same as in my accessible tabpanel system.
For this example, I’ve positionned it below.

Then it adds buttons

A div with a button is inserted between carrousel contents and the first control list. It is the “previous” button.
Another one is inserted after all carrousel contents, for the… “next” button.

ARIA is coming

Once the HTML markup is set up in a logical order for keyboard in the DOM, all ARIA attributes are added to make the link between tab buttons and tab contents, to know which one is related to which other.

And JavaScript does the rest

Keyboard shortcuts of ARIA Design Pattern for tabpanels are added, and you can easily navigate and use the carrousel.
Some listeners are waiting for you to click or use keyboard, and will do the job.

How to use it

Here is the starting code needed. Just add jQuery and the plugin, needed CSS, style it as you want, and it is ok.

<div class="carrousel relative">      
  <div class="carrousel__container mod--hidden" 
   data-carrousel-btn-previous-img="./arrow_back.png" 
   data-carrousel-btn-next-img="./arrow_next.png"
   data-carrousel-btn-previous-text="Show previous panel"
   data-carrousel-btn-next-text="Show next panel"
   data-carrousel-prefix-classes="news"
   data-carrousel-span-text-class="invisible"
   data-carrousel-transition="fade"
   data-carrousel-existing-hx="h3">
          
    <div class="carrousel__content">
      <h3>A first panel</h3>
      <p>Here the content.</p>
    </div><!--
 --><div class="carrousel__content">
      <h3>A second panel</h3>
      <p>Here the content.</p>
    </div><!--
 --><div class="carrousel__content">
      <h3>A third panel</h3>
      <p>Here the content.</p>
    </div>
          
  </div>
</div>

You may also use npm i jquery-accessible-carrousel-aria.

Important note: for accessibility purposes (for VoiceOver), the plugin has to give focus to hx (h2, h3, h4, etc.) in tab contents. It is better having hx in each content tab.

If you have some, it is great, you just have to tell the plugin. In the example above, you tell it via data-carrousel-existing-hx.
And all these subtitles will be used in the ol list.
If you don’t have, nevermind, just tell the plugin which level of hx to use with data-carrousel-hx="hx", and it will insert an h3 class="invisible" for you in each tab panel (you can “visually” hide them if needed with invisible class).
To specify the titles, use the attribute data-carrousel-span-text="Panel" and the plugin will create titles for each tab content: “Panel 1”, “Panel 2”, etc. And all these subtitles will be used in the ol list.

Other attributes are available:

data-carrousel-btn-previous-img: the address of the image used for “previous” button.
data-carrousel-btn-previous-text: the text of the “previous” button, will be put in the alt attribute if there is an image, and in the title attribute for the button.
data-carrousel-btn-next-img: the address of the image used for “next” button.
data-carrousel-btn-next-text: the text of the “next” button, will be put in the alt attribute if there is an image, and in the title attribute for the button.
data-carrousel-prefix-classes: all the classes added for styling purpose will be prefixed, to simplify creating carrousel reusable styles.
data-carrousel-span-text-class: in the ol list, the text will be wrapped into a span with this class. Example, data-carrousel-span-text-class="yipikai":
```
<a … role="tab">
  <span class="yipikai">A robust base</span>
</a>
```
data-carrousel-transition: the value of this attribute will be added as a class on div class="carrousel__container". And CSS will do the magic to animate it, for this page, I’ve created three transitions: “slide”, “fade” and “none”.
data-carrousel-active-slide: put here the number of the slide you want to display by default for your carrousel. See example of this attribute.

Usually, I minify my CSS, but for this example, I didn’t.
Go into the CSS and have a look (search “styles for carrousel, examples”), and also in the breakpoints.

Keyboard shortcuts

Keyboard navigation is supported too, here are keys.

If you focus in the carrousel “buttons” (not next and previous buttons):

use Up/Left to see previous carrousel tab,
use Down/Right to see next carrousel tab
use Home to see first carrousel tab (wherever you are in carrousel tab buttons)
use End to see last carrousel tab (wherever you are in carrousel tab buttons)

If you focus in a carrousel content:

use Ctrl Up/Left to set focus on the carrousel button for the currently displayed carrousel content
use Ctrl PageUp to set focus on the previous carrousel button for the currently displayed carrousel content
use Ctrl PageDown to set focus on the next carrousel button for the currently displayed carrousel content

Warning: Ctrl+PageUp/PageDown combination could activate for some browsers a switch of browser tabs. Nothing to do for this, as far as I know (if you have a solution, let me know).

Logic of styling classes added

Major elements are styled like this, example with:

<ol class="js-carrousel__control__list 
           prefix-carrousel__control__list 
           prefix-carrousel__control__list--1"
    role="tablist">

js-carrousel__control__list: used for JavaScript purposes, better not styling with it.
<prefix>-carrousel__control__list: a class for all carrousel control lists with this <prefix>.
<prefix>-carrousel__control__list--1: a modifier if you need to update this case in particular.